<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" data-title="Destinations" id="listview-home">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li>
            Africa
            <ul>
                <li data-icon="toprated"><a>Nairobi</a></li>
            </ul>
        </li>
        <li>
            America
            <ul>
                <li data-icon="globe"><a>Boston</a></li>
                <li data-icon="globe"><a>Ottawa</a></li>
                <li data-icon="toprated"><a>San Francisco</a></li>
            </ul>
        </li>
        <li>
            Asia
            <ul>
                <li data-icon="globe"><a>Bombay</a></li>
            </ul>
        </li>
        <li>
            Australia
            <ul>
                <li data-icon="globe"><a>Melbourne</a></li>
                <li data-icon="toprated"><a>Sydney</a></li>
            </ul>
        </li>
        <li>
            Europe
            <ul>
                <li data-icon="globe"><a>Cannes</a></li>
                <li data-icon="globe"><a>Liverpool</a></li>
                <li data-icon="toprated"><a>London</a></li>
            </ul>
        </li>
    </ul>
</div>

<style>
    .km-ios #listview-home .km-content {
        background: url(../../content/shared/images/patterns/pattern2.png);
        box-shadow: inset 0 0 30px #95764D;
    }
    .km-ios #listview-home .km-listview .km-list {
        box-shadow: 0 1px 5px #95764D;
        border: none;
    }
    .km-ios #listview-home .km-navbar {
        background: url(../../content/shared/images/patterns/pattern9.png);
    }
    .km-tablet .km-ios #listview-home .km-view-title {
        color: #fff;
        text-shadow: 0 -1px rgba(0,0,0,.5);
    }
    .km-ios #listview-home .km-navbar .km-button
    {
        background-color: #974d2e;
    }

</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
